<template>
  <!-- 新增费用主体 -->
  <view>
    <u-form class="form" :model="{}" :label-width="150">
      <u-form-item label="年份">
        <u-input :value="Year" disabled input-align="right" placeholder="年份"></u-input>
      </u-form-item>
      <u-form-item label="季度">
        <u-input :value="QuarterList[QuarterId - 1].label" disabled input-align="right" placeholder="季度"></u-input>
      </u-form-item>
      <u-form-item label="费用主体">
        <u-input disabled :value="CompanyName" placeholder="请选择费用主体" inputAlign="right"></u-input>
      </u-form-item>

      <u-form-item label="分配方式">
        <u-input
          :value="IsPercentage == 1 ? '按比例' : '按金额'"
          disabled
          input-align="right"
          placeholder="季度"
        ></u-input>
      </u-form-item>

      <u-form-item label="修改类型" required>
        <div class=" u-flex " style="width: 100%;justify-content: flex-end;">
          <u-radio-group v-model="form.ChangeType">
            <u-radio v-model="item.checked" v-for="(item, index) in UpdateTypeList" :key="index" :name="item.value">
              {{ item.label }}
            </u-radio>
          </u-radio-group>
        </div>
      </u-form-item>

      <u-form-item label="金额">
        <u-input v-model="form.Number" input-align="right" placeholder="金额"></u-input>
      </u-form-item>

      <u-form-item label="描述">
        <u-input v-model="form.Remark" input-align="right" type="textarea"></u-input>
      </u-form-item>
    </u-form>

    <u-toast ref="uToast" />

    <view class="btn-group-fixed u-p-20"><u-button type="warning" @tap="handleSubmit">确认调整</u-button></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        Id: '',
        ChangeType: '',
        Number: '',
        Remark: ''
      },

      CompanyName: '',

      QuarterId: '',

      Year: '',

      IsPercentage: '',

      CompanyList: [],
      QuarterList: [
        { label: '第一季度', value: 1, checked: false },
        { label: '第二季度', value: 2, checked: false },
        { label: '第三季度', value: 3, checked: false },
        { label: '第四季度', value: 4, checked: false }
      ],
      AssignTypeList: [{ label: '按比例', value: 1, checked: false }, { label: '按金额', value: 2, checked: false }],

      UpdateTypeList: [{ label: '新增', value: 1, checked: false }, { label: '减少', value: 2, checked: false }]
    };
  },

  onLoad(options) {
    if (options.CompanyName) {
      this.CompanyName = options.CompanyName;
    }

    if (options.Id) {
      this.form.Id = options.Id;
    }

    if (options.QuarterId) {
      this.QuarterId = options.QuarterId;
    }

    if (options.Year) {
      this.Year = options.Year;
    }

    if (options.IsPercentage) {
      this.IsPercentage = options.IsPercentage;
    }
  },

  methods: {
    handleSubmit() {
      this.$u.api.updateMarketCosts(this.form).then(res => {
        const { ResultCode, ResultMessage } = res;

        if (ResultCode == 1) {
          this.$refs.uToast.show({
            title: ResultMessage,
            back: true
          });
        } else {
          this.$u.toast(ResultMessage);
        }
      });
    }
  }
};
</script>

<style>
page {
  background-color: #eae8ed;
}
</style>

<style lang="scss">
.form {
  padding: 30rpx;
  background-color: #fff;
  margin: 30rpx;
  border-radius: 24rpx;
}
</style>
